<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>模板库</title>
    <link rel="stylesheet" href="font-family/iconfont.css">
    <link rel="stylesheet" href="../css/app-jpshow/jpshow_style.css">
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="js/jpshow.js"></script>
</head>
<body>
<div>
    <div class="weui-navbar bg_white jp-navbar">
        <div class="weui-navbar__item">
            <i class="icon iconfont icon-form fa-hx"></i> <br/>
            家庭谱
        </div>
        <div class="weui-navbar__item">
            <i class="icon iconfont icon-evaluate fa-hx"></i> <br/>
            家谱秀
        </div>
        <div class="weui-navbar__item weui-bar__item_on">
            <i class="icon iconfont icon-piclight fa-hx"></i> <br/>
            模板库
        </div>
    </div>
    <div class="weui-search-bar jp-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
                <i class="weui-icon-search"></i>
                <span>搜索家庭谱</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    <div class="model_list">
        <div class="jp-li-inline">
            <ul>
                <li><a href="#" class="text_theme">最新</a></li>
                <li><a href="#">经典</a></li>
                <li><a href="#">现代</a></li>
                <li><a href="#">年历</a></li>
                <li><a href="#">免费</a></li>
            </ul>
        </div>
        <div class="jp-flex clearfix">
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">书香门第</div>
                    <input type="radio" id="radio1" name="radio_ids" class="item-radio">
                    <label for="radio1" class="item-label"></label>
                </div>
                <div class="jp-price">
                    会员免费
                </div>
            </div>
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">现代版</div>
                    <input type="radio" id="radio2" name="radio_ids" class="item-radio">
                    <label for="radio2" class="item-label"></label>
                </div>
                <div class="jp-price">
                    <div class="pull-left">￥500</div>
                    <div class="pull-right text_theme"><i class="icon iconfont icon-cart"></i>购买</div>
                </div>
            </div>
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">现代版</div>
                    <input type="radio" id="radio3" name="radio_ids" class="item-radio">
                    <label for="radio3" class="item-label"></label>
                </div>
                <div class="jp-price">
                    <div class="pull-left">￥500</div>
                    <div class="pull-right text_theme"><i class="icon iconfont icon-cart"></i>购买</div>
                </div>
            </div>
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">现代版</div>
                    <input type="radio" id="radio4" name="radio_ids" class="item-radio">
                    <label for="radio4" class="item-label"></label>
                </div>
                <div class="jp-price">
                    <div class="pull-left">￥500</div>
                    <div class="pull-right text_theme"><i class="icon iconfont icon-cart"></i>购买</div>
                </div>
            </div>
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">现代版</div>
                    <input type="radio" id="radio5" name="radio_ids" class="item-radio">
                    <label for="radio5" class="item-label"></label>
                </div>
                <div class="jp-price">
                    <div class="pull-left">￥500</div>
                    <div class="pull-right text_theme"><i class="icon iconfont icon-cart"></i>购买</div>
                </div>
            </div>
            <div class="a-template">
                <div class="jp-inline-3">
                    <img src="images/demo3.png" alt="" class="img-responsive">
                    <div class="item_text">现代版</div>
                    <input type="radio" id="radio6" name="radio_ids" class="item-radio">
                    <label for="radio6" class="item-label"></label>
                </div>
                <div class="jp-price">
                    <div class="pull-left">￥500</div>
                    <div class="pull-right text_theme"><i class="icon iconfont icon-cart"></i>购买</div>
                </div>
            </div>
        </div>
    </div>
    <div class="p-lr">
        <a href="#" class="btn-more">
            点击或向上滑动，查看更多
        </a>
    </div>
</div>
</body>
</html>